<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵活工作日计时器</title>
    <style>
        :root {
            --primary-color: #3498db;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), #2980b9);
            color: white;
            padding: 25px 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .main-content {
            display: flex;
            flex-wrap: wrap;
        }
        
        .timer-section {
            flex: 2;
            min-width: 300px;
            padding: 30px;
        }
        
        .config-section {
            flex: 1;
            min-width: 300px;
            background: var(--light-color);
            padding: 30px;
            border-left: 1px solid #ddd;
        }
        
        .progress-container {
            margin: 30px 0;
        }
        
        .progress-bar {
            height: 35px;
            background-color: #e0e0e0;
            border-radius: 18px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--success-color), #27ae60);
            border-radius: 18px;
            width: 0%;
            transition: width 0.5s ease;
            box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
        }
        
        .progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            color: #333;
            font-size: 1.1rem;
            text-shadow: 0 1px 2px rgba(255,255,255,0.7);
        }
        
        .info-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 25px;
        }
        
        .info-box {
            background: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            border-left: 4px solid var(--primary-color);
        }
        
        .info-title {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-bottom: 8px;
        }
        
        .info-value {
            font-size: 1.4rem;
            font-weight: bold;
            color: var(--dark-color);
        }
        
        .status {
            text-align: center;
            font-size: 1.2rem;
            margin: 25px 0;
            padding: 15px;
            border-radius: 10px;
            font-weight: bold;
        }
        
        .working {
            background-color: rgba(46, 204, 113, 0.2);
            color: #27ae60;
            border: 1px solid rgba(46, 204, 113, 0.3);
        }
        
        .not-working {
            background-color: rgba(231, 76, 60, 0.1);
            color: #c0392b;
            border: 1px solid rgba(231, 76, 60, 0.2);
        }
        
        .weekend {
            background-color: rgba(243, 156, 18, 0.15);
            color: #d35400;
            border: 1px solid rgba(243, 156, 18, 0.3);
        }
        
        .config-group {
            margin-bottom: 25px;
        }
        
        h3 {
            margin-bottom: 15px;
            color: var(--dark-color);
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 8px;
        }
        
        .workday-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .day-checkbox {
            display: flex;
            align-items: center;
        }
        
        .day-checkbox input {
            margin-right: 5px;
        }
        
        .time-inputs {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .time-inputs input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 100px;
        }
        
        .special-dates {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .date-input-group {
            display: flex;
            gap: 10px;
        }
        
        .date-input-group input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        button {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #2980b9;
        }
        
        .btn-danger {
            background: var(--danger-color);
        }
        
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .date-list {
            margin-top: 10px;
            max-height: 150px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            background: white;
        }
        
        .date-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 5px;
            border-bottom: 1px solid #eee;
        }
        
        .date-item:last-child {
            border-bottom: none;
        }
        
        .legend {
            display: flex;
            justify-content: center;
            margin-top: 25px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
        }
        
        .legend-color {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .legend-text {
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .config-section {
                border-left: none;
                border-top: 1px solid #ddd;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>灵活工作日计时器</h1>
            <p class="subtitle">根据节假日和调休自动调整工作进度</p>
        </header>
        
        <div class="main-content">
            <div class="timer-section">
                <div class="status" id="status">正在计算...</div>
                
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                        <div class="progress-text" id="progressText">0%</div>
                    </div>
                </div>
                
                <div class="info-panel">
                    <div class="info-box">
                        <div class="info-title">当前时间</div>
                        <div class="info-value" id="currentTime">--:--:--</div>
                    </div>
                    <div class="info-box">
                        <div class="info-title">当前日期</div>
                        <div class="info-value" id="currentDate">----年--月--日</div>
                    </div>
                    <div class="info-box">
                        <div class="info-title">本周进度</div>
                        <div class="info-value" id="weekProgress">0%</div>
                    </div>
                    <div class="info-box">
                        <div class="info-title">剩余时间</div>
                        <div class="info-value" id="remainingTime">--:--:--</div>
                    </div>
                </div>
                
                <div class="legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: var(--success-color);"></div>
                        <div class="legend-text">工作时间</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #e0e0e0;"></div>
                        <div class="legend-text">非工作时间</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: var(--warning-color);"></div>
                        <div class="legend-text">休息日/节假日</div>
                    </div>
                </div>
            </div>
            
            <div class="config-section">
                <div class="config-group">
                    <h3>工作日设置</h3>
                    <div class="workday-selector">
                        <label class="day-checkbox">
                            <input type="checkbox" id="mon" checked> 周一
                        </label>
                        <label class="day-checkbox">
                            <input type="checkbox" id="tue" checked> 周二
                        </label>
                        <label class="day-checkbox">
                            <input type="checkbox" id="wed" checked> 周三
                        </label>
                        <label class="day-checkbox">
                            <input type="checkbox" id="thu" checked> 周四
                        </label>
                        <label class="day-checkbox">
                            <input type="checkbox" id="fri" checked> 周五
                        </label>
                        <label class="day-checkbox">
                            <input type="checkbox" id="sat"> 周六
                        </label>
                        <label class="day-checkbox">
                            <input type="checkbox" id="sun"> 周日
                        </label>
                    </div>
                </div>
                
                <div class="config-group">
                    <h3>工作时间</h3>
                    <div class="time-inputs">
                        <label>从</label>
                        <input type="time" id="startTime" value="09:00">
                        <label>到</label>
                        <input type="time" id="endTime" value="18:00">
                    </div>
                </div>
                
                <div class="config-group">
                    <h3>特殊休息日（节假日）</h3>
                    <div class="special-dates">
                        <div class="date-input-group">
                            <input type="date" id="holidayInput">
                            <button id="addHoliday">添加</button>
                        </div>
                        <div class="date-list" id="holidayList">
                            <!-- 节假日列表将在这里动态生成 -->
                        </div>
                    </div>
                </div>
                
                <div class="config-group">
                    <h3>特殊工作日（调休）</h3>
                    <div class="special-dates">
                        <div class="date-input-group">
                            <input type="date" id="workdayInput">
                            <button id="addWorkday">添加</button>
                        </div>
                        <div class="date-list" id="workdayList">
                            <!-- 调休工作日列表将在这里动态生成 -->
                        </div>
                    </div>
                </div>
                
                <button id="resetConfig" class="btn-danger">重置为默认设置</button>
            </div>
        </div>
    </div>

    <script>
        // 默认配置
        const DEFAULT_CONFIG = {
            workDays: [1, 2, 3, 4, 5], // 周一至周五
            startHour: 9,
            startMinute: 0,
            endHour: 18,
            endMinute: 0,
            holidays: [], // 特殊休息日
            workdays: []  // 特殊工作日
        };
        
        // 当前配置
        let config = {...DEFAULT_CONFIG};
        
        // 初始化配置
        function initConfig() {
            // 从本地存储加载配置
            const savedConfig = localStorage.getItem('workTimerConfig');
            if (savedConfig) {
                config = {...config, ...JSON.parse(savedConfig)};
            }
            
            // 更新UI以反映当前配置
            updateConfigUI();
        }
        
        // 更新配置UI
        function updateConfigUI() {
            // 更新工作日选择
            document.getElementById('mon').checked = config.workDays.includes(1);
            document.getElementById('tue').checked = config.workDays.includes(2);
            document.getElementById('wed').checked = config.workDays.includes(3);
            document.getElementById('thu').checked = config.workDays.includes(4);
            document.getElementById('fri').checked = config.workDays.includes(5);
            document.getElementById('sat').checked = config.workDays.includes(6);
            document.getElementById('sun').checked = config.workDays.includes(0);
            
            // 更新时间输入
            document.getElementById('startTime').value = 
                `${config.startHour.toString().padStart(2, '0')}:${config.startMinute.toString().padStart(2, '0')}`;
            document.getElementById('endTime').value = 
                `${config.endHour.toString().padStart(2, '0')}:${config.endMinute.toString().padStart(2, '0')}`;
            
            // 更新特殊日期列表
            updateDateLists();
        }
        
        // 更新日期列表
        function updateDateLists() {
            const holidayList = document.getElementById('holidayList');
            const workdayList = document.getElementById('workdayList');
            
            holidayList.innerHTML = '';
            workdayList.innerHTML = '';
            
            // 添加节假日
            config.holidays.forEach(date => {
                const item = document.createElement('div');
                item.className = 'date-item';
                item.innerHTML = `
                    <span>${formatDateDisplay(date)}</span>
                    <button class="btn-danger remove-holiday" data-date="${date}">删除</button>
                `;
                holidayList.appendChild(item);
            });
            
            // 添加特殊工作日
            config.workdays.forEach(date => {
                const item = document.createElement('div');
                item.className = 'date-item';
                item.innerHTML = `
                    <span>${formatDateDisplay(date)}</span>
                    <button class="btn-danger remove-workday" data-date="${date}">删除</button>
                `;
                workdayList.appendChild(item);
            });
            
            // 添加删除事件监听器
            document.querySelectorAll('.remove-holiday').forEach(btn => {
                btn.addEventListener('click', function() {
                    const date = this.getAttribute('data-date');
                    removeHoliday(date);
                });
            });
            
            document.querySelectorAll('.remove-workday').forEach(btn => {
                btn.addEventListener('click', function() {
                    const date = this.getAttribute('data-date');
                    removeWorkday(date);
                });
            });
        }
        
        // 格式化日期显示
        function formatDateDisplay(dateStr) {
            const date = new Date(dateStr);
            return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
        }
        
        // 移除节假日
        function removeHoliday(date) {
            config.holidays = config.holidays.filter(d => d !== date);
            saveConfig();
            updateDateLists();
        }
        
        // 移除特殊工作日
        function removeWorkday(date) {
            config.workdays = config.workdays.filter(d => d !== date);
            saveConfig();
            updateDateLists();
        }
        
        // 保存配置到本地存储
        function saveConfig() {
            localStorage.setItem('workTimerConfig', JSON.stringify(config));
        }
        
        // 检查某一天是否是工作日
        function isWorkday(date) {
            const dateStr = formatDate(date);
            const dayOfWeek = date.getDay();
            
            // 如果是特殊休息日，则不是工作日
            if (config.holidays.includes(dateStr)) return false;
            
            // 如果是特殊工作日，则是工作日
            if (config.workdays.includes(dateStr)) return true;
            
            // 否则检查是否是常规工作日
            return config.workDays.includes(dayOfWeek);
        }
        
        // 格式化日期为YYYY-MM-DD
        function formatDate(date) {
            return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        }
        
        // 获取一周的开始日期（周一）
        function getWeekStart(date) {
            const day = date.getDay();
            const diff = date.getDate() - day + (day === 0 ? -6 : 1); // 调整周日的情况
            return new Date(date.setDate(diff));
        }
        
        // 计算本周的总工作分钟数
        function calculateTotalWorkMinutes() {
            const now = new Date();
            const weekStart = getWeekStart(new Date(now));
            let totalMinutes = 0;
            
            // 遍历本周的每一天
            for (let i = 0; i < 7; i++) {
                const day = new Date(weekStart);
                day.setDate(weekStart.getDate() + i);
                
                if (isWorkday(day)) {
                    // 如果是工作日，添加完整的工作时间
                    const workMinutes = (config.endHour - config.startHour) * 60 + 
                                       (config.endMinute - config.startMinute);
                    totalMinutes += workMinutes;
                }
            }
            
            return totalMinutes;
        }
        
        // 计算已完成的工作分钟数
        function calculateWorkedMinutes() {
            const now = new Date();
            const weekStart = getWeekStart(new Date(now));
            let workedMinutes = 0;
            
            // 遍历从周一到今天的每一天
            for (let i = 0; i <= now.getDay() - (weekStart.getDay() || 7); i++) {
                const day = new Date(weekStart);
                day.setDate(weekStart.getDate() + i);
                
                if (isWorkday(day)) {
                    if (i < now.getDay() - (weekStart.getDay() || 7)) {
                        // 如果是今天之前的工作日，添加完整的工作时间
                        const workMinutes = (config.endHour - config.startHour) * 60 + 
                                           (config.endMinute - config.startMinute);
                        workedMinutes += workMinutes;
                    } else {
                        // 如果是今天，计算到今天当前时间的工作时间
                        const currentHour = now.getHours();
                        const currentMinute = now.getMinutes();
                        
                        // 如果当前时间在开始时间之前，则今天工作时间为0
                        if (currentHour < config.startHour || 
                            (currentHour === config.startHour && currentMinute < config.startMinute)) {
                            // 今天还没有开始工作
                            workedMinutes += 0;
                        }
                        // 如果当前时间在结束时间之后，则今天工作时间为完整工作时间
                        else if (currentHour > config.endHour || 
                                 (currentHour === config.endHour && currentMinute >= config.endMinute)) {
                            const workMinutes = (config.endHour - config.startHour) * 60 + 
                                               (config.endMinute - config.startMinute);
                            workedMinutes += workMinutes;
                        }
                        // 如果当前时间在工作时间内，计算已工作时间
                        else {
                            const workedToday = (currentHour - config.startHour) * 60 + 
                                              (currentMinute - config.startMinute);
                            workedMinutes += workedToday;
                        }
                    }
                }
            }
            
            return workedMinutes;
        }
        
        // 更新显示
        function updateDisplay() {
            const now = new Date();
            const dayOfWeek = now.getDay();
            const currentHour = now.getHours();
            const currentMinute = now.getMinutes();
            const currentSecond = now.getSeconds();
            
            // 更新当前时间
            document.getElementById('currentTime').textContent = 
                `${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')}:${currentSecond.toString().padStart(2, '0')}`;
            
            // 更新当前日期
            document.getElementById('currentDate').textContent = 
                `${now.getFullYear()}年${(now.getMonth()+1).toString().padStart(2, '0')}月${now.getDate().toString().padStart(2, '0')}日`;
            
            // 计算工作进度
            const totalMinutes = calculateTotalWorkMinutes();
            const workedMinutes = calculateWorkedMinutes();
            const progress = totalMinutes > 0 ? (workedMinutes / totalMinutes) * 100 : 0;
            
            // 更新进度条
            const progressFill = document.getElementById('progressFill');
            const progressText = document.getElementById('progressText');
            progressFill.style.width = `${progress}%`;
            progressText.textContent = `${progress.toFixed(1)}%`;
            document.getElementById('weekProgress').textContent = `${progress.toFixed(1)}%`;
            
            // 更新状态和剩余时间
            updateStatusAndRemainingTime(now, dayOfWeek, progress);
        }
        
        // 更新状态和剩余时间
        function updateStatusAndRemainingTime(now, dayOfWeek, progress) {
            const statusElement = document.getElementById('status');
            const remainingTimeElement = document.getElementById('remainingTime');
            const currentHour = now.getHours();
            const currentMinute = now.getMinutes();
            
            // 检查今天是否是工作日
            const today = new Date(now);
            today.setHours(0, 0, 0, 0);
            const isTodayWorkday = isWorkday(today);
            
            if (!isTodayWorkday) {
                statusElement.textContent = "今天是休息日";
                statusElement.className = "status weekend";
                
                // 找到下一个工作日
                let nextWorkday = new Date(now);
                let daysToAdd = 1;
                while (daysToAdd <= 7) {
                    nextWorkday.setDate(now.getDate() + daysToAdd);
                    if (isWorkday(nextWorkday)) break;
                    daysToAdd++;
                }
                
                remainingTimeElement.textContent = `${formatDateDisplay(formatDate(nextWorkday))} ${config.startHour.toString().padStart(2, '0')}:${config.startMinute.toString().padStart(2, '0')}`;
                return;
            }
            
            // 检查是否在工作时间
            const isInWorkTime = currentHour >= config.startHour && 
                                (currentHour < config.endHour || 
                                (currentHour === config.endHour && currentMinute < config.endMinute));
            
            if (isInWorkTime) {
                statusElement.textContent = "现在是工作时间";
                statusElement.className = "status working";
                
                // 计算当天剩余工作时间
                const remainingMinutes = (config.endHour - currentHour - 1) * 60 + 
                                       (60 - currentMinute) + 
                                       (config.endMinute > 0 ? config.endMinute : 0);
                const hours = Math.floor(remainingMinutes / 60);
                const minutes = remainingMinutes % 60;
                remainingTimeElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
            } else {
                statusElement.textContent = "现在是非工作时间";
                statusElement.className = "status not-working";
                
                // 计算到下一个工作时间的剩余时间
                let nextWorkTime = new Date(now);
                
                // 如果当前时间早于当天工作时间
                if (currentHour < config.startHour || 
                   (currentHour === config.startHour && currentMinute < config.startMinute)) {
                    nextWorkTime.setHours(config.startHour, config.startMinute, 0, 0);
                } 
                // 如果当前时间晚于当天工作时间
                else {
                    // 找到下一个工作日
                    let nextDay = new Date(now);
                    let daysToAdd = 1;
                    while (daysToAdd <= 7) {
                        nextDay.setDate(now.getDate() + daysToAdd);
                        if (isWorkday(nextDay)) break;
                        daysToAdd++;
                    }
                    
                    nextWorkTime = new Date(nextDay);
                    nextWorkTime.setHours(config.startHour, config.startMinute, 0, 0);
                }
                
                const timeDiff = nextWorkTime - now;
                const hours = Math.floor(timeDiff / (1000 * 60 * 60));
                const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
                
                remainingTimeElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
            }
        }
        
        // 初始化
        function init() {
            initConfig();
            updateDisplay();
            
            // 设置定时器，每秒更新一次
            setInterval(updateDisplay, 1000);
            
            // 添加事件监听器
            setupEventListeners();
        }
        
        // 设置事件监听器
        function setupEventListeners() {
            // 工作日选择
            document.querySelectorAll('.workday-selector input').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const dayMap = {
                        'mon': 1, 'tue': 2, 'wed': 3, 
                        'thu': 4, 'fri': 5, 'sat': 6, 'sun': 0
                    };
                    const dayId = this.id;
                    const dayValue = dayMap[dayId];
                    
                    if (this.checked) {
                        if (!config.workDays.includes(dayValue)) {
                            config.workDays.push(dayValue);
                        }
                    } else {
                        config.workDays = config.workDays.filter(d => d !== dayValue);
                    }
                    
                    saveConfig();
                });
            });
            
            // 工作时间设置
            document.getElementById('startTime').addEventListener('change', function() {
                const [hours, minutes] = this.value.split(':').map(Number);
                config.startHour = hours;
                config.startMinute = minutes;
                saveConfig();
            });
            
            document.getElementById('endTime').addEventListener('change', function() {
                const [hours, minutes] = this.value.split(':').map(Number);
                config.endHour = hours;
                config.endMinute = minutes;
                saveConfig();
            });
            
            // 添加节假日
            document.getElementById('addHoliday').addEventListener('click', function() {
                const input = document.getElementById('holidayInput');
                const date = input.value;
                
                if (date && !config.holidays.includes(date)) {
                    config.holidays.push(date);
                    saveConfig();
                    updateDateLists();
                    input.value = '';
                }
            });
            
            // 添加特殊工作日
            document.getElementById('addWorkday').addEventListener('click', function() {
                const input = document.getElementById('workdayInput');
                const date = input.value;
                
                if (date && !config.workdays.includes(date)) {
                    config.workdays.push(date);
                    saveConfig();
                    updateDateLists();
                    input.value = '';
                }
            });
            
            // 重置配置
            document.getElementById('resetConfig').addEventListener('click', function() {
                if (confirm('确定要重置所有设置吗？')) {
                    config = {...DEFAULT_CONFIG};
                    saveConfig();
                    updateConfigUI();
                }
            });
        }
        
        // 页面加载完成后初始化
        window.onload = init;
    </script>
</body>
</html>